<template>
  <el-input
    class="simple-input"
    v-if="editMode"
    v-bind="$attrs"
    clearable
    @clear="() => $emit('update:modelValue', '')"
  >
    <template v-if="$slots.prepend" #prepend>
      <slot name="prepend"></slot>
    </template>
    <template v-if="$slots.append" #append>
      <slot name="append"></slot>
    </template>
  </el-input>
  <el-text
    :type="inputTipsType"
    size="small"
    v-if="editMode && inputTips"
    style="margin-top: 5px; line-height: 1.5em"
  >
    <div v-for="(item, index) in inputTips.split('\n')" :key="index">
      {{ item }}
    </div>
  </el-text>
  <div class="simple-text" v-if="!editMode" :style="`justify-content: ${textAlign}`">
    <slot v-if="$slots.prepend" name="prepend"></slot>
    {{ $attrs.modelValue }}
    <slot v-if="$slots.append" name="append"></slot>
    <el-link
      v-if="$attrs.modelValue && showCopy"
      class="copy-link"
      :underline="false"
      @click="copyText($attrs.modelValue as string)"
    >
      <el-icon>
        <DocumentCopy />
      </el-icon>
      <span class="text">{{ t('common.clickCopy') }}</span>
    </el-link>
  </div>
</template>

<script setup lang="ts">
import { useClipboard } from '@vueuse/core'
import { DocumentCopy } from '@element-plus/icons-vue'
import type { EpPropMergeType } from 'element-plus/es/utils/vue/props/types'

defineProps({
  showCopy: {
    type: Boolean,
    default: true
  },
  textAlign: {
    type: String,
    default: 'flex-start'
  },
  inputTips: {
    type: String,
    default: ''
  },
  inputTipsType: {
    type: String as PropType<
      EpPropMergeType<
        StringConstructor,
        'success' | 'warning' | 'info' | 'primary' | 'danger',
        unknown
      >
    >,
    default: 'danger'
  }
})

const editMode = inject('editMode', true)

const message = useMessage()
const { t } = useI18n()
const { copy } = useClipboard()

const copyText = async (text: string) => {
  try {
    await copy(text)
    message.success(t('common.copySuccess'))
  } catch (e) {
    message.error(t('common.copyError'))
  }
}
</script>

<style scoped lang="scss">
.simple-input {
  :deep(.el-input__wrapper) {
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-bottom: 1px solid var(--el-border-color);
  }

  :deep(.el-textarea__inner) {
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-bottom: 1px solid var(--el-border-color);
  }

  :deep(.el-input-group__append),
  :deep(.el-input-group__prepend) {
    background-color: transparent !important;
    box-shadow: 0 -1px 0 0 var(--el-input-border-color) inset;
    border-radius: 0 !important;
  }

  :deep(.el-input-group__prepend) {
    padding: 0 10px 0 0 !important;
  }

  :deep(.el-input-group__append) {
    padding: 0 0 0 10px !important;
  }
}

.simple-text {
  display: flex;
  align-items: center;

  .copy-link {
    visibility: hidden;
    margin-left: 6px;

    .text {
      font-size: 12px;
      visibility: hidden;
    }

    &:hover {
      .text {
        visibility: visible;
      }
    }
  }

  &:hover {
    .copy-link {
      visibility: visible;
    }
  }
}
</style>
